/*
客户充值10
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header>
      <el-button type="primary" @click="handleAddUpdate()" v-repeatClick>添加</el-button>
      <el-button @click="handleBeforeUpdate" v-repeatClick>修改</el-button>
      <el-button @click="view" v-repeatClick>查看</el-button>
      <el-button @click="getRecharge" v-repeatClick>刷新</el-button>
      <el-button type="danger" @click="delRecharge" v-repeatClick>删除</el-button>
    </my-header>

    <!-- 列表区 -->
    <el-card  style="flex: 1;">
      <div class="app-page">
        <div class="content-flex">
          <div>
            <el-form ref="search" :model="search" inline size="small">
              <div>
                <el-form-item label="" prop="serialType">
                  <el-select
                    clearable
                    v-model="search.serialType"
                    placeholder="核销类型"
                    style="width: 100px"
                  >
                    <el-option v-for="option in baseFormOptions.serialType" :key="option" :label="option" :value="option"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" prop="info">
                  <el-input
                    placeholder="搜索:客户号/运单号/收据号/预付款号/收款提现/网络支付流水号/备注"
                    v-model="search.info"
                    style="width: 450px"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="" prop="payType">
                  <el-select
                    clearable
                    v-model="search.payType"
                    placeholder="缴费方式"
                    style="width: 200px"
                  >
                    <el-option v-for="option in baseFormOptions.payType" :key="option" :label="option" :value="option"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" prop="rechargeType">
                  <el-select
                    clearable
                    v-model="search.rechargeType"
                    placeholder="来源与用途"
                    style="width: 200px"
                  >
                    <el-option v-for="option in baseFormOptions.rechargeType" :key="option" :label="option" :value="option"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="" prop="moneyType">
                  <el-select
                    clearable
                    v-model="search.moneyType"
                    placeholder="货币类型"
                    style="width: 100px"
                  >
                    <el-option v-for="option in baseFormOptions.moneyType" :key="option" :label="option" :value="option"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" prop="date">
                  <el-date-picker
                    v-model="search.date"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="" prop="">
                  <el-button type="primary" round @click="searchPage">搜索</el-button>
                  <el-button
                    type="warning"
                    round
                    @click="$refs.search.resetFields()"
                  >重置</el-button>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
        <!-- 列表区 -->
        <div style="flex: 1">
          <el-table
            height="100%"
            :data="data"
            border
            stripe
            highlight-current-row
            ref="multipleTable"
            @row-dblclick="handleRowDbclick"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="index" width="55" align="center">
            </el-table-column>
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column
              label="操作时间"
              sortable
              width="200"
              prop="updateTime"
              align="center"
            ></el-table-column>
            <el-table-column label="核销类型" min-width="150">
              <template slot-scope="scope">
                <span :style="{color:scope.row.serialType==='入账'?'green':'red'}">
                  {{scope.row.serialType}}
                </span>
                <span style="margin:0 10px">
                  <span>{{scope.row.serialType==='入账'?'+':'-'}}</span>
                  {{scope.row.paymentAmount}}
                </span>
                <span>{{scope.row.moneyType}}</span>
              </template>
            </el-table-column>
            <el-table-column label="本次结余" prop="currentCustomerBalance"></el-table-column>
            <el-table-column label="客户号" >
              <template slot-scope="scope">
                <el-link>
                  <router-link :to="{path:'/consumers/customer',query:{customerNum:scope.row.customerNum}}" target="_blank">{{scope.row.customerNum}}</router-link>
                </el-link>
              </template>
            </el-table-column>
            <el-table-column label="缴费方式" prop="payType"></el-table-column>
            <el-table-column label="来源与用途" prop="rechargeType" width="150"></el-table-column>
            <el-table-column label="备注" min-width="400">
              <template slot-scope="scope">
                <div>
                  {{scope.row.storeName}}
                  <span style="margin-left:5px">流水号：{{scope.row.serialCode}}</span>
                </div>
                <div style="margin: 5px 0">{{scope.row.note}}</div>
                <div v-if="scope.row.receiptCode">收据号：{{scope.row.receiptCode}}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作人"
              prop="updateUser"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
        <!-- 分页区 -->
        <div style="margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 200, 500, 1000]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 添加修改零售预购单信息 -->
    <el-dialog
      v-dialog-drag
      :title="title+'零钱'"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="500px"
      @close="restForm"
    >
      <el-form
        size="small"
        :model="baseForm"
        label-position="left"
        label-width="120px"
        :rules="baseFormRules"
        ref="baseForm"
      >
        <el-form-item prop="orderCode" label="流水号">
          {{baseForm.serialCode}}
        </el-form-item>
        <el-form-item prop="customerNum" label="客户号">
          <el-input v-model="baseForm.customerNum"></el-input>
        </el-form-item>
        <el-form-item prop="storeId" label="所属门店">
          <el-select
            ref="select"
            filterable
            style="width: 100%"
            v-model="baseForm.storeName"
            placeholder="请选择所属门店">
            <el-option
              v-for="item in stores"
              :key="item.id"
              :value="item.name"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="serialType" label="核销类型">
          <el-radio-group v-model="baseForm.serialType">
            <el-radio :label="item" v-for="item in baseFormOptions.serialType" :key="item">{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="moneyType" label="零钱货币类型">
          <el-radio-group v-model="baseForm.moneyType">
            <el-radio :label="item" v-for="item in baseFormOptions.moneyType" :key="item">{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="paymentAmount" label="缴费金额">
          <el-input v-model="baseForm.paymentAmount"></el-input>
        </el-form-item>
        <el-form-item label="客户缴费方式" prop="payType">
          <el-select
            clearable
            v-model="baseForm.payType"
            placeholder="缴费方式"
            style="width: 100%"
          >
            <el-option v-for="option in baseFormOptions.payType" :key="option" :label="option" :value="option"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="note" label="" label-width="0px">
          <el-input v-model="baseForm.note" placeholder="备注"></el-input>
        </el-form-item>
        <el-row :gutter="20" style="margin-top:30px">
          <el-col :span="24" style="text-align: right">
            <el-form-item>
              <el-button style="margin-left: 10px" @click="restForm">重置</el-button>
              <el-button type="primary" @click="submit" v-if="title!='查看'">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

let search = {
  //搜索
  info:'',
  //核销类型
  serialType:'',
  //支付方式
  payType: "",
  //来源于用途
  rechargeType: "",
  //货币类型
  moneyType:'',
  //时间范围
  date:[]
};


//零售预购单基本信息表单
let baseForm = {
  id:0,
  //流水号编号
  serialCode:'',
  //核销类型
  serialType:'入账',
  //支付方式
  payType: "",
  //来源于用途
  rechargeType: "",
  //货币类型
  moneyType:'加元',
  //缴费金额
  paymentAmount:0,
  //客户号
  customerNum:'',
  //门店名
  storeName:'',
  //备注
  note:'',
};

import myHeader from "@/components/pageHEader/pageHeader";
import { mapGetters } from "vuex";
import { getDict } from '@/api/common'
import {
  getRecharge,
  modRecharge,
  delRecharge,
  addRecharge,
  getRechargeCode,
  getRechargeUseType
} from '@/api/finances/charge'


export default {
  name: "charge",
  components: {
    myHeader,
  },
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      total: 0,
      data: [],
      //表格选中
      multipleSelection: [],
      //搜索
      search: this.cloneObj(search),
      //对话框
      dialogFormVisible: false,
      title: "添加",
      baseForm:this.cloneObj(baseForm),
      baseFormRules:{
        customerNum: [this.$RegExp.required()],
        moneyType: [this.$RegExp.required()],
        paymentAmount:[this.$RegExp.required(),this.$RegExp.lgZero()],
        payType:[this.$RegExp.required('请选择缴费方式')],
      },
      baseFormOptions:{
        serialType:['入账','出账'],
        payType:[],
        rechargeType:[],
        moneyType:[],
      },
    };
  },
  computed: {
    ...mapGetters(["stores","roles"]),
  },
  created() {
    this.getDic('Currency').then(resp=>{
      this.baseFormOptions.moneyType = resp.data.records[0].childrenInfo.map(item=>item.content)
    })
    this.getDic('payType').then(resp=>{
      this.baseFormOptions.payType = resp.data.records[0].childrenInfo.map(item=>item.content).filter(item=>item.indexOf('退款')===-1 && item.indexOf('积分')===-1 && item.indexOf('零钱')===-1)
    })
    getRechargeUseType().then(resp=>{
      this.baseFormOptions.rechargeType = resp.data
    })
  },
  mounted() {
    this.getRecharge();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getRecharge()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getRecharge()
    },
    //重置表单信息
    restForm() {
      this.$nextTick(() => {
        if (this.$refs.baseForm) this.$refs.baseForm.resetFields();
      });
    },
    handleBeforeUpdate(){
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.tip("只能勾选表格中的一条数据");
        return;
      }
      this.handleAddUpdate(this.multipleSelection[0])
    },
    handleAddUpdate(row) {
      //修改处理
      if (row) {
        this.title = "修改";
        //将数据复制给form
        this.handleModform(row, this.baseForm);
        this.dialogFormVisible = true;
      } else {
        getRechargeCode().then(resp=>{ //获取新增时的零售预购单编号
          this.baseForm = this.cloneObj(baseForm);
          this.baseForm.serialCode = resp.data
          this.title = "添加";
          this.dialogFormVisible = true;
        })
      }
    },
    getRecharge() {
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        info: this.search.info,
        serialType:this.search.serialType,
        moneyType:this.search.moneyType,
        payType:this.search.payType,
        rechargeType:this.search.rechargeType,
        ...this.handleDate(this.search.date,'startTime','endTime')
      };
      getRecharge(query).then((resp) => {
        this.data =  resp.data.records
        this.total = resp.data.total;
      });
    },
    //搜索
    searchPage(){
      this.currentPage = 1
      this.pageSize = 20
      this.getRecharge()
    },
    //表格双击修改
    handleRowDbclick(row) {
      this.handleAddUpdate(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    submit() {
      this.$refs["baseForm"].validate((valid) => {
        if (valid) {
          let submit = Object.assign(
            this.baseForm
          );
          let request;
          if (this.title === "添加") {
            request = addRecharge;
          } else {
            request = modRecharge;
          }
          request(submit).then((resp) => {
            this.$message.success(resp.message || "成功");
            this.dialogFormVisible = false;
            this.getRecharge();
          });
        }
      });
    },
    //查看零售预购单信息
    view() {
      this.handleBeforeUpdate();
      this.title = '查看'
    },
    //删除零售预购单信息
    delRecharge() {
      if (this.multipleSelection.length === 0) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length !== 1) {
        this.tip("当前删除耗时较长，只能勾选表格中的一条数据删除！");
        return;
      }
      this.confirm().then(() => {
        delRecharge(this.multipleSelection[0].id).then(resp => {
            this.$message.success(resp.message || "成功");
            this.getRecharge();
          }
        );
      });
    },

  },
};
</script>

<style scoped lang='scss'>
.tdItem {
  line-height: 25px;
}
</style>
